<template>
  <div class="doAnswer">
    <div class="questionDetailHeader">
      <img src="../../assets/image/goBack.png" @click="goBack"/>
      <p>我要提问</p>
    </div>
    <div class="questionBox">
      <img :src="aimg" alt="">
      <p class="title">{{atitle}}</p>

    </div>
    <div class="answerBox">

      <textarea style="resize: none" v-model="text" placeholder="请用4~40字描述你的问题"></textarea>
      <span class="count">{{textLength}}/40</span>
    </div>	

    <div :class="{active:textLength>3,btn:true}" @click="doQuestion">确认</div>

    <confirm v-model="confirmVisible" title="提示" @on-confirm="goLogin">
			<p style="text-align:center;">您当前尚未登录，现在前往登录？</p>
	</confirm>
  </div>
</template>
<script>
/*我来回答*/
import {XHeader,Confirm} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"doAnswer",
  // 数据
  data(){

    return{
    	userId:'',
      shopId:this.$route.params.id,
      text:'', //输入的文字
      textLength:0,//长度;
      atitle:sessionStorage.getItem('aname'),
      aimg:sessionStorage.getItem('aimg'),
      confirmVisible:false,
    }
  },
  watch:{
    //监听text的长度
    text:function(newText,oldText){

      this.textLength=newText.length;
      if(newText.length>40){
        this.text=oldText
      }
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');

  },
  // el被创建，并挂载到实例上
  mounted(){

  },

  // 方法（实例中的方法）-----------
  methods:{
  	 goLogin() {
            this.$router.push('/login');
        },
    goBack(){
      this.$router.go(-1)
    },
    doQuestion(){
    	   if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
      let obj={};
      obj.USER_ID=this.userId;
      obj.SERV_ID=this.shopId;
      obj.MESSAGE=this.text;
    
      this.$fetchPost("serviceDetailQA/setServiceDetailQuestion",obj).then(res=>{
        if(res.STATUS_CODE==1){
          this.$router.go(-1)
        }
      },err=>{
          console.log(err)
      })
    }
  },

  // 子组件
  components:{
    XHeader,
    Confirm
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.doAnswer{
    width: 7.5rem;
    height: 100%;
    overflow: hidden;
    background: #fff;
  .questionDetailHeader{
    position: relative;
    height:0.8rem;
    line-height:0.8rem;
    font-size:0.33rem;

    color:#222222;
    img{
      position: absolute;
      left: 0.22rem;
      bottom: 0.25rem;
      height: 0.38rem;
    }
  }
  .questionBox{
    height: 1.5rem;
    width: 100%;
    position: relative;
    text-align:left;
    .title{
      font-size: 0.29rem;
      color: #222222;
      margin-bottom: 0.3rem;
      padding-left: 1.5rem;
      line-height: 1.5rem;
    }
    img{
      width: 0.9rem;
      height: 0.9rem;
      position:absolute;
      left: 0.4rem;
      top:0.3rem;
    }
  }
  .answerBox{
    position:relative;
    textarea{
      display: block;
      margin-left: 0.2rem;
      height: 2.7rem;
      width: 7.1rem;
      border:none;
      background:#f6f6f6 ;
      line-height: 0.4rem;
      font-size:0.29rem;
      color: #999999;
      padding: 0.3rem;
    }
    .count{
      position: absolute;
      right:0.4rem;
      bottom: 0.2rem;
      font-size: 0.27rem;
      color:#999999;
    }
  }

  .btn{
    position: absolute;
    bottom:0.3rem;
    left: 50%;
    margin-left: -1.4rem;
    width: 2.8rem;
    height: 0.7rem;
    border-radius: 0.35rem;
    background: #f5f5f5;
    font-size:0.26rem;
    color: #999999;
    display: flex;
    display:-webkit-flex;
    justify-content:center;
    align-items:center;
    text-align: center;
  }
  .active{
    background: #F22E2E;
    color: #ffffff;
  }
}

.questionDetailHeader:after{
  content: '';
  position: absolute;
  bottom: 0 ;
  left:0 ;
  width: 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  height: 1px;
  background: #dddddd;
}
</style>
